import Vue from 'vue'
import Vuex from 'vuex'
// 导入需要的 API 接口
import { getUserInfoAPI, getUserProfileAPI } from '@/api/userAPI.js'

Vue.use(Vuex)

// 定义初始的 state 对象
let initState = {
  // 存储 token 信息的对象   { token, refresh_token }
  tokenInfo: {},
  // 用户的基本信息
  userInfo: {},
  // 用户的简介信息
  userProfile: {}
}

// 读取 localStorage 中的 state 数据
const stateStr = localStorage.getItem('state')

if (stateStr) {
  // 将本地存储的数据还原到 vuex 中
  initState = JSON.parse(stateStr)
}

// 存储到 vuex 中的数据，都是放到内存中的，只要浏览器一刷新，数据就丢失了
export default new Vuex.Store({
  // 今后如果希望在 state 中定义新的数据项，需要找到 initState 这个对象，在它身上定义数据即可
  state: initState,
  mutations: {
    // 更新 tokenInfo 的数据，payload 格式 { token, refresh_token }
    updateTokenInfo(state, payload) {
      state.tokenInfo = payload

      // 调用 saveStateToStorage 方法
      this.commit('saveStateToStorage')
    },
    // 用来把 state 对象持久化存储到 localStorage 中
    saveStateToStorage(state) {
      localStorage.setItem('state', JSON.stringify(state))
    },
    // 更新用户的基本信息（payload 就是请求到的用户信息对象）
    updateUserInfo(state, payload) {
      state.userInfo = payload
      this.commit('saveStateToStorage')
    },
    // 更新用户简介信息（payload 就是请求到的用户简介信息）
    updateUserProfile(state, payload) {
      state.userProfile = payload
      this.commit('saveStateToStorage')
    },
    // 重置 state 中的数据为空
    cleanState(state) {
      // 清空 vuex 中关键的数据
      state.tokenInfo = {}
      state.userInfo = {}
      state.userProfile = {}

      // 把清空之后的 state 对象，持久化存储到本地
      this.commit('saveStateToStorage')
    }
  },
  actions: {
    // 初始化用户的基本信息
    async initUserInfo(ctx) {
      // 调用 API 接口
      const { data: res } = await getUserInfoAPI()
      if (res.message === 'OK') {
        // TODO：把请求到的数据，转交给 Mutation 方法 ctx.commit('Mutation方法名')
        ctx.commit('updateUserInfo', res.data)
      }
    },
    // 初始化用户的简介信息
    async initUserProfile(ctx) {
      const { data: res } = await getUserProfileAPI()
      if (res.message === 'OK') {
        // TODO：把用户的简介信息，转交给 Mutation
        ctx.commit('updateUserProfile', res.data)
      }
    }
  },
  // vuex 中的计算属性
  getters: {
    // 动态返回用户的头像地址
    userAvatar(state) {
      // 定义一个默认的头像地址
      let imgSrc = 'https://img01.yzcdn.cn/vant/apple-1.jpg'

      if (state.userInfo.photo) {
        // 如果用户的头像不为空，则以 photo 的值为准
        imgSrc = state.userInfo.photo
      }
      return imgSrc
    }
  },
  // 第二个人资项目，会大量使用 modules 模块
  modules: {}
})
